<template>
    <f7-page class="common-page has-bottom-btns">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>人员登记</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>

        <v-accordion title="人员信息" class="infoList noBorder" disabled>
            <van-form class="basic-form" input-align="right" ref="form" error-message-align="right">
                <van-field v-model="models.model.personName" required :rules="[{ required: true, message: '请输入或选择姓名' }]"
                    label="姓名" placeholder="请输入" label-width="100" input-align="right">
                    <template #button>
                        <span class="choose-span" @click="showPerson = true">选择</span>
                    </template>
                </van-field>
                <van-field v-model="models.model.orgName" required
                    :rules="[{ required: true, message: '请输入或选择所属单位' }]" label="所属单位" placeholder="请输入" label-width="100"
                    input-align="right">
                    <template #button>
                        <span class="choose-span" @click="showUnit = true">选择</span>
                    </template>
                </van-field>
                <van-field v-model="models.model.personIdcard" label="身份证号" required 
                    :rules="[{ required: true, message: '请输入身份证号' },{ validator: cardRegex, message: '请输入正确的身份证号' }]" placeholder="请输入">
                </van-field>
                <van-field v-model="models.model.personMobile" label="手机号码" required maxlength="11"
                    :rules="[{ required: true, message: '请输入手机号码' },{ validator: mobileRegex, message: '请输入正确的手机号码' }]" placeholder="请输入">
                </van-field>
                <van-field required label="人员照片" readonly class="field-pic">
                </van-field>
                <qm-file-upload ref="administratorPic" v-if="(personType == 'manager' && models.model.managerId) || (personType == 'oprator' && models.model.personPkid)" :acceptCount="1" :galleryOptions="{ multiple: false }" :params="{
                    type: 'attach',
                    dataKey: personType == 'manager'? models.model.managerId : models.model.personPkid,
                    bizType: personType == 'manager'?'mobileAdministratorPic':'mobilePrjJobPersonPic',
                }" uploadId="administratorPic">
                </qm-file-upload>
            </van-form>
        </v-accordion>
        <v-accordion title="证书信息" class="infoList noBorder" disabled>
            <div class="tips-blue">
                <van-icon name="info-o" size="14px"/>
                <span>请上传机械类的安全生产考核合格证书</span>
            </div>
            <van-form class="basic-form" input-align="right" ref="cerform"  error-message-align="right">
                <van-field v-model="models.mobileManagerCert.operationTypeName" label="证书类型" placeholder="请输入"></van-field>
                <van-field v-model="models.mobileManagerCert.certCode" label="证书编号" placeholder="请输入"></van-field>
                <van-field v-model="models.mobileManagerCert.certStand" label="发证机关" placeholder="请输入"></van-field>
                <van-field readonly clickable name="datetimePicker" :value="models.mobileManagerCert.grantDate" right-icon="arrow"
                    label="发证日期" placeholder="请选择" @click="onShowPicker('grantDate')" />
                <van-field readonly clickable name="datetimePicker" :value="models.mobileManagerCert.certEndDate" right-icon="arrow"
                    label="证书有效期" placeholder="请选择" @click="onShowPicker('certEndDate')" />
                <van-field label="证书照片" readonly class="field-pic">
                </van-field>
                <qm-file-upload ref="certificatePic" v-if="(personType == 'manager' && models.model.managerId) || (personType == 'oprator' && models.model.personPkid)" :acceptCount="1" :galleryOptions="{ multiple: false }" :params="{
                    type: 'attach',
                    dataKey: personType == 'manager'? models.model.managerId : models.model.personPkid,
                    bizType: personType == 'manager'? 'mobileCertificatePic' : 'mobilePrjJobPersonCertPic',
                }" uploadId="certificatePic">
                </qm-file-upload>
            </van-form>
        </v-accordion>
        <f7-toolbar position="bottom" no-shadow class="fff" v-if="!showPicker">
            <f7-button fill class="submit-btn" @click="onCommit">提交</f7-button>
        </f7-toolbar>
        <!-- 选择日期 -->
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="date" @confirm="onConfirm" @cancel="showPicker = false" :value="currentDate" />
        </van-popup>
        <!-- 选择单位 -->
        <units-popup v-model="showUnit" :extraParams="{engineeId: engineeId}" url="/app/equipment/eqmMobileManager/queryOrgs" @save="suerUnit">
        </units-popup>
        <!-- 选择人员 -->
        <con-person-popup v-model="showPerson" :extraParams="{engineeId: engineeId}"
            url="/app/equipment/eqmMobileManager/queryPersonList" @save="surePerson"></con-person-popup>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
import UnitsPopup from './../components/UnitsPopup.vue';
import ConPersonPopup from './../components/ConPersonPopup.vue';
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model:'/equipment/eqmMobileManager/getEntity'
        };
    }
    onInit() {
        this.context.personType = this.$f7route.query.personType;
        this.context.engineeId = this.$f7route.query.engineeId;
        if(this.context.personType == 'oprator'){
            this.urls.model = '/equipment/eqmPrjJobPerson/getEntity'
        }else{
            this.urls.model = '/equipment/eqmMobileManager/getEntity'
        }
    }
    onAfterQuery(type, isSuccess, result) {
        if(type == 'form' && this.context.personType == 'oprator'){
            result.models.mobileManagerCert =  result.models.eqmPrjJobPersonCert
        }
        return result;
    }

    onAfterSave(isSuccess, result) {
        if (isSuccess) {
            this.$f7.views.current.router.back({ force: true });
        }
    }

    mixin() {
        return {
            components: {
                ConPersonPopup,
                UnitsPopup
            },
            data() {
                return {
                    engineeId:'',
                    showPerson:false,
                    models: {
                        model: {},
                        mobileManagerCert:{},
                        eqmPrjJobPersonCert:{}
                    },
                    dateType:'',
                    currentDate: new Date(),
                    showPicker: false,
                    pageAction: "",
                    showUnit: false,// 选择总包分包单位
                    personType:'',//manager 机械管理员  操作人员
                };
            },
            methods: {
                mobileRegex(val) {
                    if (!val) {
                        return false
                    } else {
                        return /^0{0,1}(13[0-9]|14[01456789]|15[012356789]|16[2567]|17[012345678]|18[0-9]|19[012356789])[0-9]{8}$/.test(
                            val
                        )
                    }
                },
                cardRegex(val) {
                    if (!val) {
                        return false
                    }
                    let _IDRe18 =
                        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    let _IDre15 =
                        /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
                    if (_IDRe18.test(val) || _IDre15.test(val)) {
                        return true
                    } else {
                        return false
                    }
                },
                // 姓名选择
                surePerson(result){
                    if (result.personPkid) {
                        if(this.personType == 'manage'){
                            this.models.model.personPkid = result.personPkid;
                            this.models.model.prjPersonPkid = result.personPkid;
                        }
                        this.models.model.personName = result.personName;
                        this.models.model.orgName = result.orgName;
                        this.models.model.personIdcard = result.personIdcard || '';
                        this.models.model.personMobile = result.personMobile || '';
                    }
                },
                // 所属单位选择
                suerUnit(result) {
                    this.models.model.orgName = result.orgName
                },
                // 选择日期
                onShowPicker(dateType){
                    this.dateType = dateType;
                    this.showPicker = true;
                },
                // 时间选择完成
                onConfirm(time) {
                    this.models.mobileManagerCert[this.dateType] = this.$formatter.formatDate(
                        time,
                        "yyyy-MM-dd"
                    );
                    this.showPicker = false;
                },
                //提交
                onCommit() {
                    let saveUrl = "";
                    let postData = {};
                    if(this.personType == 'manager'){
                        saveUrl = '/app/equipment/eqmMobileManager/save'
                        postData = this.models;
                    }else{
                        saveUrl = '/app/equipment/eqmPrjJobPerson/save'
                        postData = {
                            model:this.models.model,
                            eqmPrjJobPersonCert:this.models.mobileManagerCert
                        }
                    }
                    this.$refs.form.validate()
                        .then((res) => {
                            if (this.$refs.administratorPic.getUploadedCount() < 1) {
                                this.$toast("请上传人员照片")
                                return false
                            }
                            postData.pageAction = 'create';
                            postData.model.engineeId = this.engineeId;
                            this.$f7.request.post(
                                saveUrl, postData,
                                (r) => {
                                    r = JSON.parse(r);
                                    if (r && r.success) {
                                        this.$f7.dialog.alert("提交成功", () => {
                                            this.$f7router.back();
                                        })
                                    } else {
                                        this.$toast(r.message || "提交失败，请稍后重试");
                                    }
                                },
                                (err) => { }
                            );
                        })
                },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../assets/css/commonPage.less");

@{deep} .v-workflow-list {
    padding: 0 16px;
}

@{deep}.accordion .accordion-item>.item-link>.item-content {
    padding-left: 16px !important;
}

@{deep}.accordion.accordion-list {
    background-color: #fff;
    margin-bottom: 10px;
}

@{deep}.list input[type="text"] {
    height: 22px;
}

.basic-form {
    .choose-span {
        display: inline-block;
        padding-left: 16px;
        height: 15px;
        line-height: 15px;
        font-size: 13px;
        color: #3385ff;
        border-left: 1px solid #d7dce4;
    }

    @{deep}.van-field__control {
        font-size: 13px;
    }

    @{deep}.field-pic.van-cell {
        &::after {
            border-bottom: none;
        }
    }
}
</style>
